

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Modal, Alert, } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface StatisticsData {
  total: number;
  completed: number;
  pending: number;
  efficiency: string;
}

type StatisticsType = 'personal' | 'department';

const DataStatisticsScreen = () => {
  const router = useRouter();
  const [selectedStatisticsType, setSelectedStatisticsType] = useState<StatisticsType>('personal');
  const [isExportModalVisible, setIsExportModalVisible] = useState(false);

  const statisticsData = {
    personal: {
      total: 28,
      completed: 23,
      pending: 5,
      efficiency: '2.5h'
    },
    department: {
      total: 156,
      completed: 142,
      pending: 14,
      efficiency: '4.2h'
    }
  };

  const currentStatisticsData = statisticsData[selectedStatisticsType];

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const handleExportPress = () => {
    setIsExportModalVisible(true);
  };

  const handleCloseExportModal = () => {
    setIsExportModalVisible(false);
  };

  const handleExportExcel = () => {
    setIsExportModalVisible(false);
    Alert.alert('导出Excel', 'Excel报告正在生成中...');
  };

  const handleExportPdf = () => {
    setIsExportModalVisible(false);
    Alert.alert('导出PDF', 'PDF报告正在生成中...');
  };

  const handleStatisticsTypeChange = (type: StatisticsType) => {
    setSelectedStatisticsType(type);
  };

  const renderStatCard = (
    value: string | number,
    label: string,
    iconName: string,
    iconColor: string
  ) => (
    <View style={styles.statCard}>
      <View style={styles.statCardContent}>
        <View style={styles.statCardTextContainer}>
          <Text style={styles.statCardValue}>{value}</Text>
          <Text style={styles.statCardLabel}>{label}</Text>
        </View>
        <FontAwesome6 name={iconName} size={24} color={iconColor} />
      </View>
    </View>
  );

  const renderBarChart = () => {
    const chartData = [
      { day: '周一', height: 64 },
      { day: '周二', height: 80 },
      { day: '周三', height: 48 },
      { day: '周四', height: 96 },
      { day: '周五', height: 72 },
      { day: '周六', height: 32 },
      { day: '周日', height: 24 },
    ];

    return (
      <View style={styles.chartContainer}>
        {chartData.map((item, index) => (
          <View key={index} style={styles.chartBarWrapper}>
            <LinearGradient
              colors={['#6366f1', '#8b5cf6']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={[styles.chartBar, { height: item.height }]}
            />
            <Text style={styles.chartBarLabel}>{item.day}</Text>
          </View>
        ))}
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <TouchableOpacity onPress={handleBackPress} style={styles.backButton}>
            <FontAwesome6 name="arrow-left" size={20} color="#d1d5db" />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>数据统计</Text>
        </View>
        <TouchableOpacity onPress={handleExportPress} style={styles.exportButton}>
          <LinearGradient
            colors={['#6366f1', '#8b5cf6']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.exportButtonGradient}
          >
            <FontAwesome6 name="download" size={14} color="#ffffff" />
            <Text style={styles.exportButtonText}>导出报告</Text>
          </LinearGradient>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* 统计维度切换 */}
        <View style={styles.dimensionTabsContainer}>
          <View style={styles.dimensionTabsWrapper}>
            <TouchableOpacity
              style={[
                styles.dimensionTab,
                selectedStatisticsType === 'personal' ? styles.dimensionTabActive : styles.dimensionTabInactive
              ]}
              onPress={() => handleStatisticsTypeChange('personal')}
            >
              {selectedStatisticsType === 'personal' ? (
                <LinearGradient
                  colors={['#6366f1', '#8b5cf6']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 1 }}
                  style={styles.dimensionTabGradient}
                >
                  <Text style={styles.dimensionTabTextActive}>个人统计</Text>
                </LinearGradient>
              ) : (
                <Text style={styles.dimensionTabTextInactive}>个人统计</Text>
              )}
            </TouchableOpacity>
            <TouchableOpacity
              style={[
                styles.dimensionTab,
                selectedStatisticsType === 'department' ? styles.dimensionTabActive : styles.dimensionTabInactive
              ]}
              onPress={() => handleStatisticsTypeChange('department')}
            >
              {selectedStatisticsType === 'department' ? (
                <LinearGradient
                  colors={['#6366f1', '#8b5cf6']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 1 }}
                  style={styles.dimensionTabGradient}
                >
                  <Text style={styles.dimensionTabTextActive}>部门统计</Text>
                </LinearGradient>
              ) : (
                <Text style={styles.dimensionTabTextInactive}>部门统计</Text>
              )}
            </TouchableOpacity>
          </View>
        </View>

        {/* 数据概览卡片 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>
            {selectedStatisticsType === 'personal' ? '个人数据概览' : '部门数据概览'}
          </Text>
          <View style={styles.statsGrid}>
            {renderStatCard(currentStatisticsData.total, '总审批数', 'file-lines', '#6366f1')}
            {renderStatCard(currentStatisticsData.completed, '已完成', 'circle-check', '#10b981')}
            {renderStatCard(currentStatisticsData.pending, '待处理', 'clock', '#f59e0b')}
            {renderStatCard(currentStatisticsData.efficiency, '平均时长', 'gauge-high', '#06b6d4')}
          </View>
        </View>

        {/* 审批效率分析 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>审批效率分析</Text>
          <View style={styles.efficiencyCard}>
            <View style={styles.efficiencyRow}>
              <Text style={styles.efficiencyLabel}>本月平均处理时长</Text>
              <Text style={styles.efficiencyValueGood}>2.5小时</Text>
            </View>
            <View style={styles.efficiencyRow}>
              <Text style={styles.efficiencyLabel}>上月平均处理时长</Text>
              <Text style={styles.efficiencyValueNormal}>3.2小时</Text>
            </View>
            <View style={styles.efficiencyRow}>
              <Text style={styles.efficiencyLabel}>效率提升</Text>
              <Text style={styles.efficiencyValueGood}>+21.9%</Text>
            </View>
            <View style={styles.efficiencyRow}>
              <Text style={styles.efficiencyLabel}>最长审批时长</Text>
              <Text style={styles.efficiencyValueWarning}>8.5小时</Text>
            </View>
            <View style={styles.efficiencyRow}>
              <Text style={styles.efficiencyLabel}>最短审批时长</Text>
              <Text style={styles.efficiencyValueGood}>15分钟</Text>
            </View>
          </View>
        </View>

        {/* 审批类型分布 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>审批类型分布</Text>
          <View style={styles.distributionCard}>
            <View style={styles.distributionRow}>
              <View style={styles.distributionLeft}>
                <View style={[styles.distributionColor, { backgroundColor: '#6366f1' }]} />
                <Text style={styles.distributionLabel}>请假申请</Text>
              </View>
              <View style={styles.distributionRight}>
                <Text style={styles.distributionValue}>12</Text>
                <Text style={styles.distributionPercentage}>(42.9%)</Text>
              </View>
            </View>
            <View style={styles.distributionRow}>
              <View style={styles.distributionLeft}>
                <View style={[styles.distributionColor, { backgroundColor: '#10b981' }]} />
                <Text style={styles.distributionLabel}>采购申请</Text>
              </View>
              <View style={styles.distributionRight}>
                <Text style={styles.distributionValue}>8</Text>
                <Text style={styles.distributionPercentage}>(28.6%)</Text>
              </View>
            </View>
            <View style={styles.distributionRow}>
              <View style={styles.distributionLeft}>
                <View style={[styles.distributionColor, { backgroundColor: '#f59e0b' }]} />
                <Text style={styles.distributionLabel}>差旅报销</Text>
              </View>
              <View style={styles.distributionRight}>
                <Text style={styles.distributionValue}>5</Text>
                <Text style={styles.distributionPercentage}>(17.9%)</Text>
              </View>
            </View>
            <View style={styles.distributionRow}>
              <View style={styles.distributionLeft}>
                <View style={[styles.distributionColor, { backgroundColor: '#06b6d4' }]} />
                <Text style={styles.distributionLabel}>其他</Text>
              </View>
              <View style={styles.distributionRight}>
                <Text style={styles.distributionValue}>3</Text>
                <Text style={styles.distributionPercentage}>(10.7%)</Text>
              </View>
            </View>
          </View>
        </View>

        {/* 审批趋势图表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>近7天审批趋势</Text>
          <View style={styles.trendCard}>
            {renderBarChart()}
            <Text style={styles.chartSummary}>本周共处理 23 项审批，平均每天 3.3 项</Text>
          </View>
        </View>

        {/* 详细数据列表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>详细数据</Text>
          <View style={styles.detailedCard}>
            <View style={styles.detailedRow}>
              <View style={styles.detailedLeft}>
                <FontAwesome6 name="circle-check" size={16} color="#10b981" />
                <Text style={styles.detailedLabel}>审批通过率</Text>
              </View>
              <Text style={styles.detailedValueGood}>92.3%</Text>
            </View>
            <View style={styles.detailedRow}>
              <View style={styles.detailedLeft}>
                <FontAwesome6 name="circle-xmark" size={16} color="#ef4444" />
                <Text style={styles.detailedLabel}>审批驳回率</Text>
              </View>
              <Text style={styles.detailedValueBad}>7.7%</Text>
            </View>
            <View style={styles.detailedRow}>
              <View style={styles.detailedLeft}>
                <FontAwesome6 name="share-nodes" size={16} color="#06b6d4" />
                <Text style={styles.detailedLabel}>转办次数</Text>
              </View>
              <Text style={styles.detailedValueInfo}>3次</Text>
            </View>
            <View style={styles.detailedRow}>
              <View style={styles.detailedLeft}>
                <FontAwesome6 name="clock" size={16} color="#f59e0b" />
                <Text style={styles.detailedLabel}>超时审批</Text>
              </View>
              <Text style={styles.detailedValueWarning}>1次</Text>
            </View>
            <View style={styles.detailedRow}>
              <View style={styles.detailedLeft}>
                <FontAwesome6 name="users" size={16} color="#8b5cf6" />
                <Text style={styles.detailedLabel}>部门总人数</Text>
              </View>
              <Text style={styles.detailedValueNormal}>15人</Text>
            </View>
          </View>
        </View>
      </ScrollView>

      {/* 导出报告模态框 */}
      <Modal
        visible={isExportModalVisible}
        transparent={true}
        animationType="fade"
        onRequestClose={handleCloseExportModal}
      >
        <TouchableOpacity
          style={styles.modalOverlay}
          activeOpacity={1}
          onPress={handleCloseExportModal}
        >
          <View style={styles.modalContainer}>
            <Text style={styles.modalTitle}>选择导出格式</Text>
            <View style={styles.modalButtons}>
              <TouchableOpacity onPress={handleExportExcel} style={styles.modalButton}>
                <LinearGradient
                  colors={['#6366f1', '#8b5cf6']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 1 }}
                  style={styles.modalButtonGradient}
                >
                  <FontAwesome6 name="file-excel" size={20} color="#ffffff" />
                  <Text style={styles.modalButtonText}>Excel 格式</Text>
                </LinearGradient>
              </TouchableOpacity>
              <TouchableOpacity onPress={handleExportPdf} style={styles.modalButton}>
                <LinearGradient
                  colors={['#06b6d4', '#3b82f6']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 1 }}
                  style={styles.modalButtonGradient}
                >
                  <FontAwesome6 name="file-pdf" size={20} color="#ffffff" />
                  <Text style={styles.modalButtonText}>PDF 格式</Text>
                </LinearGradient>
              </TouchableOpacity>
              <TouchableOpacity onPress={handleCloseExportModal} style={styles.modalCancelButton}>
                <Text style={styles.modalCancelButtonText}>取消</Text>
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      </Modal>
    </SafeAreaView>
  );
};

export default DataStatisticsScreen;

